<!DOCTYPE html>
<html lang="en" >
<head></head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <script src="http://boxphpjs.oss-cn-shanghai.aliyuncs.com/jquery-1.11.3.min.js" type="text/javascript"></script>
<body>
<style type="text/css">

   
.popupBg{ z-index: 99; width: 100%; height: 100%; background-color: #000; position:fixed;top:0; left: 0px; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }
.popup{ display: none;   z-index: 999; background-color: #fff; width: 100%; height: 500px; overflow-y: scroll; }
.popup-modal-in{  display: block;animation:myfirst 0.5s;
-moz-animation:myfirst 0.5s; /* Firefox */
-webkit-animation:myfirst 0.5s; /* Safari and Chrome */
-o-animation:myfirst 0.5s; /* Opera */}
.popup-modal-out{ 
  display: block;
animation:myfirst2 0.5s;
-moz-animation:myfirst2 0.5s; /* Firefox */
-webkit-animation:myfirst2 0.5s; /* Safari and Chrome */
-o-animation:myfirst2 0.5s; /* Opera */
}

@keyframes myfirst
{
from { 
        transform: translate3d(0,100%,0);
        -ms-transform: translate3d(0,100%,0);      /* IE 9 */
        -webkit-transform: translate3d(0,100%,0);  /* Safari and Chrome */
        -o-transform: translate3d(0,100%,0);       /* Opera */
        -moz-transform: translate3d(0,100%,0);     /* Firefox */
}
to { 
        transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);      /* IE 9 */
        -webkit-transform: translate3d(0,0,0);  /* Safari and Chrome */
        -o-transform: translate3d(0,0,0);       /* Opera */
        -moz-transform: translate3d(0,0,0);     /* Firefox */

 }
}



@-moz-keyframes myfirst /* Firefox */
{
 from { 
        transform: translate3d(0,100%,0);
        -ms-transform: translate3d(0,100%,0);      /* IE 9 */
        -webkit-transform: translate3d(0,100%,0);  /* Safari and Chrome */
        -o-transform: translate3d(0,100%,0);       /* Opera */
        -moz-transform: translate3d(0,100%,0);     /* Firefox */
}
to { 
        transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);      /* IE 9 */
        -webkit-transform: translate3d(0,0,0);  /* Safari and Chrome */
        -o-transform: translate3d(0,0,0);       /* Opera */
        -moz-transform: translate3d(0,0,0);     /* Firefox */

 }
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
 from { 
        transform: translate3d(0,100%,0);
        -ms-transform: translate3d(0,100%,0);      /* IE 9 */
        -webkit-transform: translate3d(0,100%,0);  /* Safari and Chrome */
        -o-transform: translate3d(0,100%,0);       /* Opera */
        -moz-transform: translate3d(0,100%,0);     /* Firefox */
}
to { 
        transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);      /* IE 9 */
        -webkit-transform: translate3d(0,0,0);  /* Safari and Chrome */
        -o-transform: translate3d(0,0,0);       /* Opera */
        -moz-transform: translate3d(0,0,0);     /* Firefox */

 }
}

@-o-keyframes myfirst /* Opera */
{
 from { 
        transform: translate3d(0,100%,0);
        -ms-transform: translate3d(0,100%,0);      /* IE 9 */
        -webkit-transform: translate3d(0,100%,0);  /* Safari and Chrome */
        -o-transform: translate3d(0,100%,0);       /* Opera */
        -moz-transform: translate3d(0,100%,0);     /* Firefox */
}
to { 
        transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);      /* IE 9 */
        -webkit-transform: translate3d(0,0,0);  /* Safari and Chrome */
        -o-transform: translate3d(0,0,0);       /* Opera */
        -moz-transform: translate3d(0,0,0);     /* Firefox */

 }
}


@keyframes myfirst2
{
from { 
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
to { -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
    }
}

</style>
<script type="text/javascript">
  function popup(){
     $(".popup").removeClass("popup-modal-out");
    $(".popup").addClass("popup-modal-in");
  }
  function colse(){
      $(".popup").removeClass("popup-modal-in");
      $(".popup").addClass("popup-modal-out");
  }
</script>

    <div class="fixedBottom"  onclick="popup(this)" data-type="popup" h=1 url="#addCommentDiv" style="text-align:center">
        评论
  </div>

 
    <div class="popup" id="addCommentDiv" style="height:100%;">
    <form action="/BoxSns/Home/Index/do_comment" id="addComment"  class="mgt10" data-type="ajaxSubmit" method="post" style="padding-bottom:20px; ">
        
        <input type="hidden" name="type" value="<{$data['type']}>" />
        <input type="hidden" name="pid" value="<{$data['id']}>" />
        <input type="hidden" name="to_comment_id" value="0" />
        <div class="form-item">
        <textarea style="width:100%" name="content" data-type="kindeditor" placeholder="请在这里输入你的评论" ></textarea>     
        </div>
       <div class="form-item-btn">
        <button type="button" onclick="colse()" class="btn colse btn-default btn-large a_bnt">取消</button>
        <button id="btnAsk" type="submit" class="btn  btn-success btn-large a_bnt">提交</button>
        </div>
 
        <div class="clearfix"></div>

    </form>

</div>
 </body></html>